<template>
  <div id="map" style="width: 100%; height: 25vw"></div>
</template>

<script setup>
import { onMounted } from "vue";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
onMounted(() => {
  const map = L.map("map").setView([31.3246, 120.5897], 13);

  L.tileLayer("https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", {
    attribution:
      '&copy; <a href="https://www.OpenStreetMap.org/copyright">OpenStreetMap</a> contributors',
  }).addTo(map);

  const locations = [
    [31.3246, 120.5897, "陆慕元和"],
    [31.0246, 120.0097, "2222"],
    [31.3846, 119.5897, "33333"],
  ];

  locations.forEach((location) => {
    L.marker([location[0], location[1]]).addTo(map).bindPopup(location[2]);
  });
});
</script>

